<%--
  Created by IntelliJ IDEA.
  User: Al Sah-him
  Date: 2018/7/5
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/global.jsp" %>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=0, user-scalable=0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<html>
<head>
    <jsp:include page="../common/include.jsp"/>
    <title>首页</title>
    <style>
        p {
            margin: 0;
            padding: 0;
        }

        .banner {
            background: url("${frontPath}/images/banner1.png") no-repeat;
            height: 600px;
            width: 100%;
            background-size: cover;
        }

        .commonBg {
            width: 100%;
            background: #091a2E;
        }

        .point {
            height: 755px;
        }

        .top-title {
            width: 1190px;
            height: 174px;
            margin: 0 auto;
            padding-top: 63px;
        }

        .title {
            font-size: 33px;
            text-align: center;
            color: #fff;
        }

        .enTitle {
            font-size: 16px;
            color: #889198;
            padding: 9px 0 20px 0;
            text-align: center;
        }

        .line {
            width: 50px;
            height: 2px;
            background: -webkit-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: -o-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: -moz-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: linear-gradient(left, #11343E, #2AD1FD, #11343E);
            border-radius: 1px;
            margin: 0 auto;
        }

        .content {
            width: 1190px;
            height: 884px;
            margin: 0px auto;
            border-bottom: 1px solid rgba(18, 42, 68, 1);
        }

        .case .imgWrap{
            width:190px;
            height:337px;
            border:1px solid rgba(42,209,253,1);
            border-radius:2px;
            float: left;
            margin: 50px 143px 0 0;
        }
        .case .imgWrap img{
            width: 180px;
            height: 327px;
            display: block;
            margin: 5px auto;
        }
        .mgr0{
            margin-right: 0!important;
        }

        .po-top{
            width: 100%;
            height: 109px;
            background: url("${frontPath}/images/program2.png") no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
<jsp:include page="layout/head.jsp"/>
<div class="banner"></div>
<div class="point commonBg">
    <div class="top-title">
        <p class="title">小程序不是APP胜似APP</p>
        <p class="enTitle">SMALL PROGRAM IS NOT A APP BETTER THAN A APP</p>
        <p class="line"></p>
    </div>
    <div class="content">
        <div class="po-top">

        </div>
    </div>
    <%--<span class="mes" v-if="seen">{{message}}</span>--%>
</div>

<div class="case commonBg">
    <div class="top-title">
        <p class="title">小程序案例</p>
        <p class="enTitle">CASE STUDY</p>
        <p class="line"></p>
    </div>
    <div class="content">
        <div class="">
            <div class="imgWrap">
                <img src="${frontPath}/images/program.png">
            </div>
            <div class="imgWrap">
                <img src="${frontPath}/images/program.png">
            </div>
            <div class="imgWrap">
                <img src="${frontPath}/images/program.png">
            </div>
            <div class="imgWrap mgr0">
                <img src="${frontPath}/images/program.png">
            </div>
            <div class="imgWrap">
                <img src="${frontPath}/images/program.png">
            </div>
            <div class="imgWrap">
                <img src="${frontPath}/images/program.png">
            </div>
            <div class="imgWrap">
                <img src="${frontPath}/images/program.png">
            </div>
            <div class="imgWrap mgr0">
                <img src="${frontPath}/images/program.png">
            </div>
        </div>

    </div>
    <%--<span class="mes" v-if="seen">{{message}}</span>--%>
</div>

<jsp:include page="layout/foot.jsp"/>
</body>
<script>
    $(function () {
        //导航栏
        initGuide(1);

        $(window).scroll(function () {
            var scrollTop=$(document).scrollTop();
            var height=$(".banner").height() - 67;
            if(scrollTop > height){
                $(".headWrap").addClass("bgBlue");
            }else {
                $(".headWrap").removeClass("bgBlue");
            }
        });
    });
</script>
</html>
